import { Icon } from '@iconify/react/dist/iconify.js';
import { useState } from 'react';

const LineCollapsed: React.FC<{
	children: React.ReactNode;
}> = props => {
	const [show, setShow] = useState(false);

	return (
		<div className={`${show ? '' : 'h-23px overflow-hidden'} relative pr-20px`}>
			{props.children}
			<div
				onClick={() => setShow(!show)}
				className="text-primary cursor-pointer absolute top-0 right-0 flex items-center justify-center text-primary">
				<Icon icon="ant-design:down-outlined" className={`${show ? 'rotate-180' : ''} transition-all`}></Icon>
				{show ? '收起' : '更多'}
			</div>
		</div>
	);
};

export default LineCollapsed;
